<template>
  <view class="comp-steps">
    <view
      v-for="(item, index) in steps"
      :key="index"
      :class="{ 'comp-steps__item': true }"
      @click="gotoStep(item.sign)"
    >
      <text
        :class="{ 'comp-steps__item-num': true, active: index <= curStep }"
        :data-index="index + 1"
      />
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    cur: {
      type: String,
      default: '',
    },
    steps: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {
      historys: [],
    };
  },

  computed: {
    curStep() {
      let index = 0;
      for (let i = 0; i < this.steps.length; i++) {
        if (this.cur === this.steps[i].sign) {
          index = i;
          break;
        }
      }
      return index;
    },
  },

  watch: {
    cur(newValue, oldValue) {
      if (newValue !== oldValue) {
        this.historys.push(newValue);
      }
    },
  },

  methods: {
    gotoStep(name) {
      const keys = this.steps.map((item) => item.sign);
      // 限制只能往回回退，并且已经操作过的步骤也能回退
      if (
        name &&
        (keys.indexOf(name) < keys.indexOf(this.cur) ||
          this.historys.indexOf(name) > -1)
      )
        this.$emit('change', {
          name,
          direction:
            keys.indexOf(name) < keys.indexOf(this.cur) ? 'left' : 'right',
        });
    },
  },

  created() {
    this.historys.push(this.cur);
  },
};
</script>

<style lang="scss">
.comp-steps {
  display: flex;

  &__item {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 100rpx;
    color: #8799a3;
    font-size: 28rpx;

    &::before {
      content: '';
      display: block;
      position: absolute;
      height: 0;
      width: calc(100% - 82rpx);
      border-bottom: 1rpx solid #ccc;
      left: calc(0rpx - (100% - 82rpx) / 2);
      top: 42rpx;
      z-index: 0;
    }

    &:first-child::before {
      display: none;
    }

    &-num {
      display: block;
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
      line-height: 42rpx;
      margin: 20rpx auto;
      font-size: 24rpx;
      border: 1px solid #8799a3;
      position: relative;
      overflow: hidden;

      &::before {
        transform: translateY(-21rpx);
      }

      &::after {
        transform: translateY(40rpx);
        transition: all 0.3s ease-in-out 0s;
      }

      &::after,
      &::before {
        content: attr(data-index);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        transition: all 0.3s ease-in-out 0s;
        transform: translateY(0);
        text-align: center;
      }

      &.active {
        background-color: $page-main-color;
        font-family: 'iconfont' !important;
        font-size: 26rpx;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        border: none;
      }

      &.active::before {
        transform: translateY(-40upx);
        color: #fff;
        border: 1px solid $page-main-color;
      }

      &.active::after {
        content: '\e61a';
        transform: translateY(0rpx);
        color: #fff;
        border: none;
      }
    }
  }
}
</style>
